import React from 'react';
import { Card, Row, Col, Statistic, Divider, List, Tag, Typography } from 'antd';
import { Line } from '@ant-design/plots';
import {
  BulbOutlined,
  DashboardOutlined,
  BarChartOutlined,
  CheckCircleOutlined
} from '@ant-design/icons';

const { Title, Paragraph, Text } = Typography;

const LightAnalysisReport = ({ analysisResult }) => {
  if (!analysisResult) return null;

  const { brightness, colorTemp, distribution, suggestions } = analysisResult;

  const getBrightnessStatus = (value) => {
    if (value < 50) return { color: 'red', text: '严重不足' };
    if (value < 100) return { color: 'orange', text: '偏暗' };
    if (value < 150) return { color: 'green', text: '适中' };
    return { color: 'blue', text: '充足' };
  };

  const getColorTempStatus = (temp) => {
    if (temp < 3000) return { color: 'orange', text: '暖色调' };
    if (temp < 5000) return { color: 'blue', text: '中性色调' };
    return { color: 'cyan', text: '冷色调' };
  };

  const brightnessStatus = getBrightnessStatus(brightness);
  const colorTempStatus = getColorTempStatus(colorTemp);

  // 图表配置
  const chartConfig = {
    data: distribution.filter((_, index) => index % 5 === 0), // 每5个点取一个，使图表更清晰
    xField: 'brightness',
    yField: 'count',
    smooth: true,
    xAxis: {
      title: { text: '亮度值' },
    },
    yAxis: {
      title: { text: '像素分布(%)' },
    },
    tooltip: {
      formatter: (data) => ({
        name: '分布比例',
        value: `${data.count.toFixed(2)}%`
      }),
    },
  };

  return (
    <div className="analysis-report">
      <Card>
        <Title level={2}>光线分析报告</Title>
        <Divider />
        
        {/* 基础指标 */}
        <Row gutter={16}>
          <Col span={12}>
            <Card>
              <Statistic
                title="平均亮度"
                value={brightness}
                suffix="lux"
                prefix={<BulbOutlined />}
              />
              <Tag color={brightnessStatus.color} style={{ marginTop: '8px' }}>
                {brightnessStatus.text}
              </Tag>
            </Card>
          </Col>
          <Col span={12}>
            <Card>
              <Statistic
                title="色温"
                value={colorTemp}
                suffix="K"
                prefix={<DashboardOutlined />}
              />
              <Tag color={colorTempStatus.color} style={{ marginTop: '8px' }}>
                {colorTempStatus.text}
              </Tag>
            </Card>
          </Col>
        </Row>

        {/* 光线分布图 */}
        <Card title="光线分布分析" style={{ marginTop: '20px' }}>
          <Line {...chartConfig} height={300} />
        </Card>

        {/* 补光建议 */}
        <Card 
          title={
            <span>
              <CheckCircleOutlined /> 专业补光建议
            </span>
          }
          style={{ marginTop: '20px' }}
        >
          <List
            dataSource={suggestions}
            renderItem={(item) => (
              <List.Item>
                <Typography.Text>{item}</Typography.Text>
              </List.Item>
            )}
          />
        </Card>

        {/* 补充说明 */}
        <Card title="专业解读" style={{ marginTop: '20px' }}>
          <Paragraph>
            <Text strong>光线质量评估：</Text>
            {brightness < 100 ? (
              <Text type="warning">当前场景光线不足，需要进行补光处理。</Text>
            ) : (
              <Text type="success">当前场景光线充足，可以适当调整以优化效果。</Text>
            )}
          </Paragraph>
          <Paragraph>
            <Text strong>色温分析：</Text>
            <Text>
              当前色温为 {colorTemp}K，属于{colorTempStatus.text}。
              {colorTemp < 3000 ? '适合营造温暖氛围。' : 
               colorTemp > 5000 ? '适合突出清晰度和层次感。' : 
               '适合大多数场景。'}
            </Text>
          </Paragraph>
          <Paragraph>
            <Text strong>光线均匀度：</Text>
            <Text>
              通过光线分布图可以看出，
              {distribution.some(d => d.count > 30) ? 
                '场景中存在明显的高光区域，建议适当调整以降低对比度。' : 
                '光线分布较为均匀，有利于呈现自然的视觉效果。'}
            </Text>
          </Paragraph>
        </Card>
      </Card>
    </div>
  );
};

export default LightAnalysisReport;
